<template>
  <el-cascader :ref="refs" placeholder="请选择部门" :popper-class="refs" @visible-change="visibleChange" @expand-change="visibleChange" :disabled="disabled" :options="datas" collapse-tags :props="props" filterable v-model="ids" @change="checkChange" :show-all-levels="showAllLevels" :clearable="clearable"></el-cascader>
</template>

<script>
export default {
  props: {
    value: "",
    showAllLevels: {
      type: Boolean,
      default: true,
    },
    config: {
      type: Object,
      default: () => { return {} },
    },
    root: 0,
    clearable: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    defaultDisabled: {
      type: Array,
      default: () => { return [] },
    },
  },
  data() {
    return {
      datas: [],
      checkedKeys: [],
      ids: "",
      props: {
        checkStrictly: true,
        label: "name",
        value: 'id',
        emitPath: false,
        // expandTrigger: 'hover',
      },
      isFirst: false,
    }
  },
  watch: {
    value: function (newValue) {
      this.ids = newValue;
      if (this.ids && !this.isFirst) {
        this.checkChange(this.ids)
        this.isFirst = true;
      }
    },
    defaultDisabled() {
      this.setChildren(this.datas);
    }
  },
  beforeDestroy() {
    this.$bus.$off('depart_update')
  },
  created() {
    this.props = Object.assign(this.props, this.config);
    this.refs = "depts_" + new Date().getTime();
  },
  mounted() {
    this.ids = this.value;
    this.$bus.$on("depart_update", data => {
      this.getData();
    })
    this.getData();
  },
  methods: {
    getData() {
      let params = {
        pId: 0,
      }
      this.loading = true;
      this.https("get", "/api/Dept/GetDeptTree", params).then(res => {
        this.loading = false;
        if (res.success) {
          let data = {};
          res.response.name = "校级";
          if (this.root == 0) {
            data = [res.response];
          } else if (this.root == 1) {
            data = res.response.children;
          }
          this.datas = data;
          let tag = false;
          this.datas.map(item => {
            if (item.children && item.children.length > 0) {
              tag = true;
            }
          })
          this.props.checkStrictly = tag;
          this.setChildren(this.datas);
          if (this.ids && !this.isFirst) {
            this.checkChange(this.ids)
            this.isFirst = true;
          }
        }
      }).catch(() => {
        this.loading = false;
      })
    },
    setChildren(arr) {
      arr.map(item => {
        if (this.defaultDisabled.indexOf(item.id) >= 0) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
        if (item.children && item.children.length > 0) {
          this.setChildren(item.children);
        }
      })
    },
    checkChange(val) {
      this.$emit('input', val);
      let data = this.datas.find(item => item.id == val);
      this.$emit('change', data);
    },
    visibleChange(val) {
      if (this.props.checkStrictly && val) {
        setTimeout(() => {
          var depts = document.getElementsByClassName(this.refs)[0];
          var btns = depts.getElementsByClassName('el-radio__input');
          for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = () => {
              this.$refs[this.refs]._data.dropDownVisible = false;
            }
          }
        }, 500);
      }
    }
  },
}
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
</style>
